<template>
<view>
	<view class="top-info">
		<text>
			相关系数反映的是净持仓与收盘价格两者之间的相关性。若系数为1，表示两者走势完全相同;若系数为-1，则表示两者走势完全相反若系数为0，则表示两者走势没有线性关系
			如果某一期货公司的净持仓与价格的相关系数为正，且越趋向1，则表示该公司在这一时间周期内的净持仓方向与行情趋于一致。反之相关系数为负，且越趋向-1，则表示该期货公司在这一时间周期内的持仓方向与行情反向关系更强。
		</text>
	</view>
	<view class="group-box">
		<view class="item-box">
			<view class="item">
				<view class="title title-green">净持仓数值与价格</view>
				<view class="table-box">
					<view class="table">
						<view class="tr">
							<view class="tl">
								<text>周期</text>
								<image src="@/static/home/subpage/query.png"></image>
							</view>
							<view class="tl">
								<text>胜率</text>
								<image @click="isexplain=true" src="@/static/home/subpage/query.png"></image>
							</view>
							<view class="tl">
								<text>相关系数</text>
								<image @click="iscoefficient=true" src="@/static/home/subpage/query.png"></image>
							</view>
							<view class="tl">
								<text>相关性判断</text>
								<image src="@/static/home/subpage/query.png"></image>
							</view>
						</view>
						<view class="box">
							<view class="row" v-for="(item,index) in 4">
								<view class="tl">近60日</view>
								<view class="tl">50%</view>
								<view class="tl">0.1650</view>
								<view class="tl">中度负相关</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="group-box">
		<view class="info-box">
			<view class="date">
				<text>数据时间11-7</text>
				<!-- <text>看当日排行</text> -->
			</view>
			<view class="fix-box">
				<view class="tab">
					<image src="@/static/home/subpage/charts5.png"></image>
					<text>净持仓数值</text>
					<text>7386</text>
				</view>
				<view class="tab">
					<image src="@/static/home/subpage/charts2.png"></image>
					<text>收盘价</text>
					<text>1755</text>
				</view>
				<view class="tab">
					<image src="@/static/home/subpage/charts6.png"></image>
					<text>增减变化 </text>
					<text>8</text>
				</view>
			</view>
		</view>
		<view class="qiun-charts-box">
			<view class="legend">
				<text>净持仓数据</text>
				<text>收盘价</text>
			</view>
			<view class="qiun-charts">
				<l-echart ref="lineChart" @finished="lineInit"></l-echart>
			</view>
		</view>
	</view>
	<view class="bottom-info">
		<text>如宏源期货生猪2201合约的净持仓与生猪价格在40日周期内相关系数达到0.846，显示两者走势具有强相关关系，表明该期货公司的净持仓操作与行情走势趋于一致。</text>
	</view>
</view>
</template>

<script>
import * as echarts from '@/utils/echarts.min.js';		
export default {
	data() {
		return {
			lineOption:{},
		};
	},
	methods:{
		lineInit() {
			this.lineOption={
				color: 'rgba(0,0,0,0.45)',
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				grid: {
					right: '2',
					left:'0',
					top:'10',
					bottom:'10',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24', '2023-10-25','2023-10-26','2023-10-27'],
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: false
						},
					}
				],
				yAxis: [
					{
						type: 'value',
						// name: '手',
						position: 'left',
						alignTicks: true,
						// offset: 80,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: '{value}'
						},
					},
					{
						type: 'value',
						// name: '元',
						position: 'right',
						alignTicks: true,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							// formatter: '{value}'
							formatter: function(value) {
									return value.toFixed(2); // 返回保留两位小数的字符串形式
							}
						},
						min: 1600.00
					}
				],
				series: [
					{
						name: '净持仓数据',
						type: 'line',
						yAxisIndex: 0,
						data:[4301,17200,4308,15022,4301,17200,4308,15022],
						symbol: 'none',
						itemStyle:{
							color:'#0BDEC9'
						},
						lineStyle:{
							width:2
						},
					},
					{
						name: '收盘价',
						type: 'line',
						yAxisIndex: 1,
						data:[1682,1800,1690,1799,1682,1800,1690,1799.11],
						symbol: 'none',
						itemStyle:{
							color:'#356FE5'
						},
						lineStyle:{
							width:2
						},
					}
				]
			}
			this.$refs.lineChart.init(echarts, chart=> {
				chart.setOption(this.lineOption);
			});
		},
	}
}
</script>

<style lang="scss">
page{
	background: #F4F5F7;
	padding:0 24rpx;
}
.top-info{
	padding:32rpx 8rpx 8rpx;
	font-size: 28rpx;
	color: #333333;
	line-height: 41rpx;
	font-family: PingFang SC, PingFang SC;
}
.bottom-info{
	padding:24rpx 8rpx 24rpx;
	font-size: 28rpx;
	color: #333333;
	line-height: 41rpx;
	font-family: PingFang SC, PingFang SC;
}
.group-box{
	margin-top:24rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding:24rpx;
	box-sizing: border-box;
	.table-box{
		// margin-top:32rpx;
		.cl-green{
			color: #33C45B !important;
		}
		.table{
			border-top: 2rpx solid #F6F7F9;
			.tr{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F6F7F9;
				padding:24rpx 0;
				.tl{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
				}
			}
			.box{
				.row{
					padding:24rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F6F7F9;
					.tl{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0,0,0,0.8);
					}
					.tl:nth-child(3){
						color: #FF3B30;
					}
				}
				.row:last-child{
					border-bottom:0;
				}
			}
		}
	}
	.item-box{
		.title{
			height: 56rpx;
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
			line-height: 56rpx;
		}
		.title-green{
			color: #33C45B;
			background: rgba(51,196,91,0.08);
		}
		.title-orange{
			color: #FFA200;
			background: rgba(255,162,0,0.08);
		}
		.table{
			border-top:0;
			.tr{
				.tl{
					justify-content: flex-start;
					& image{
						width:46rpx;height:46rpx;
					}
				}
			}
			.box{
				.row{
					.tl{
						font-size: 24rpx;
						justify-content: flex-start;
					}
					.tl:nth-child(3){
						color: #FF3B30;
					}
					.tl:nth-child(4){
						color: #FF3B30;
					}
				}
			}
			.tl:nth-child(1){
				width:24%;
			}
			.tl:nth-child(2){
				width:24%;
			}
			.tl:nth-child(3){
				width:24%;
			}
			.tl:nth-child(4){
				width:28%;
			}
		}
	}
	.info-box{
		// margin-top:24rpx;
		padding:24rpx 24rpx 16rpx;
		background: #F4F5F7;
		border-radius: 16rpx;
		.date{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: rgba(0,0,0,0.4);
			// & text:last-child{
			// 	font-size: 24rpx;
			// 	color: #356FE5;
			// }
		}
		.fix-box{
			margin-top:16rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.tab{
				display: flex;
				align-items: center;
				width: 50%;
				margin-top:8rpx;
				& image{
					width:48rpx;height:48rpx;
				}
				& text{
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
				}
				& text:last-child{
					font-weight: bold;
					color: rgba(0,0,0,0.8);
					padding-left:8rpx;
				}
			}
		}
	}
	.qiun-charts-box{
		.legend{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 24rpx;
			color: rgba(0,0,0,0.6);
			margin-top:24rpx;
		}
		.qiun-charts{
			width:654rpx;
			height:276rpx;
			margin-top:16rpx;
		}
	}
}
</style>
